<script setup lang="ts">
import { ElButton } from 'element-plus'

const props = defineProps<{
  avatar?: string
  name?: string
  role?: string
}>()

const emit = defineEmits<{ (e: 'click'): void }>()

const handleClick = () => {
  emit('click')
}
</script>

<template>
  <div class="user-card">
    <img :src="props.avatar" :alt="props.name" />
    <h4>{{ props.name }}</h4>
    <p>{{ props.role }}</p>
    <ElButton size="small" @click="handleClick">查看详情</ElButton>
  </div>
</template>

<style scoped>
.user-card {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  width: 200px;
  margin: 8px;
}
.user-card img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}
</style>
